<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>海洋牧场监测系统</title>
	<!-- 引入 Bootstrap -->
	
	<!-- 引入 ECharts -->
	<script src="{{ url_for('static', filename='js/echarts.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/china.js') }}"></script>
    <style>
        body {
    margin: 0;
    font-family: "Microsoft YaHei", sans-serif;
    background-color: white;
    color: #fff;
  }
        .navbar {
    background-color: #003366;
    padding: 10px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .navbar h1 {
    font-size: 20px;
    margin: 0;
  }
  .navbar ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .navbar ul li {
    margin: 0 15px;
  }
  .navbar ul li a {
    color: #fff;
    text-decoration: none;
  }
  .navbar .username,
  .exit {
    margin-left: 20px;
  }


        .main-content {
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 20px;
        }

        .content-header {
            margin-bottom: 30px;
        }

        .content-header h2 {
            font-size: 24px;
            color: #333;
        }

        .content-body {
            display: flex;
            gap: 20px;
        }

        .video-container {
            flex: 1;
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .video-container video {
            width: 100%;
            display: block;
        }

        .video-info {
            padding: 15px;
        }

        .video-info h3 {
            font-size: 18px;
            margin-bottom: 10px;
        }

        .video-info .info-item {
            display: flex;
            align-items: center;
            padding: 10px;
            background-color: #f0f8ff;
            border-radius: 4px;
            margin-bottom: 10px;
        }

        .video-info .info-item i {
            margin-right: 10px;
            color: #0066cc;
        }

        .status-container {
            flex: 1;
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .status-container h3 {
            font-size: 18px;
            margin-bottom: 15px;
        }

        .status-item {
            background-color: #f0f8ff;
            border-radius: 4px;
            padding: 15px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }

        .status-item i {
            margin-right: 10px;
            color: #0066cc;
        }

        .score-container {
            flex: 1;
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .score-container h3 {
            font-size: 18px;
            margin-bottom: 15px;
        }

        .score-info {
            background-color: #f0f8ff;
            border-radius: 4px;
            padding: 15px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }

        .score-info i {
            margin-right: 10px;
            color: #0066cc;
        }

        .score-stars {
            display: flex;
            margin-top: 10px;
        }

        .star {
            color: #ffcc00;
            font-size: 24px;
        }

        .star.empty {
            color: #ddd;
        }
		
		
		.container-fluid {
			max-width: 1980px;
			margin: 0 auto;
			padding: 20px;
		}

		.row {
			display: flex;
			gap: 20px;
		}

		.col-md-5,
		.col-md-7 {
			background-color: white;
			border-radius: 10px;
			padding: 10px;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		}

		.col-md-5 {
			flex: 0 0 calc(41.6666666% - 10px); /* 减去 gap 的一半 */
		}

		.col-md-7 {
			flex: 0 0 calc(58.3333333% - 10px);
		}

		/* 小屏幕下变为上下排列 */
		@media (max-width: 768px) {
			.col-md-5,
			.col-md-7 {
				flex: 1 1 100%;
				margin-bottom: 20px;
			}
		}

		.section-title {
			text-align: center;
			margin-bottom: 20px;
			color: #333;
			font-size: 20px;
		}

		.video-container video {
			width: 100%;
			height: auto;
			display: block;
			border-radius: 8px;
		}

		#main {
			width: 100%;
			height: 600px;
		}
    </style>
	
</head>
<body>
    <div class="navbar">
        <div><h1>海洋牧场监测系统</h1></div>
        <ul>
                
                    <li><a href="{{ url_for('tomain') }}"><i class="home-icon"></i> 首页</a></li>
                
                
                    <li><a href="{{ url_for('todata') }}"><i class="data-icon"></i> 主要信息</a></li>
                
                
                    <li><a href="{{ url_for('towater') }}"><i class="underwater-icon"></i> 水下系统</a></li>
               
                    <li><a href="{{ url_for('toai') }}"><i class="ai-icon"></i> 智能中心</a></li>
                    {% if userrole=="admin" %}
                    <li><a href="{{ url_for('toadadmin') }}"><i class="admin-icon"></i> 管理员</a></li>
                    {% endif %}
        </ul>
       
        <div >
            <ul><li><a href="{{ url_for('topersonal') }}" class="username"><i class="user-icon"></i> {{ username }} </a></li>
            <li><a href="{{ url_for('exit') }}" class="exit"><i class="exit-icon"></i> 退出</a>
            </li></ul>
            
        </div>
    </div>
    <div class="container-fluid">
        <!-- 视频和地图两栏布局 -->
        <div class="row">
            <!-- 左侧：视频区域 -->
            <div class="col-md-5">
                <h2 class="section-title">展示视频</h2>
                <div class="video-container">
                    <video autoplay loop muted controls>
                        <source src="../static/video/yu1.mp4" type="video/mp4">
                        抱歉，您的浏览器不支持内嵌视频。
                    </video>
                </div>
            </div>
    
            <!-- 右侧：地图区域 -->
            <div class="col-md-7">
                <h2 class="section-title">全国实时气温分布图</h2>
                <div id="main"></div>
            </div>
        </div>
    </div>
    
    <script>
        // 初始化图表
        let myEcharts = echarts.init(document.getElementById("main"));
    
        // 城市列表
        const cities = [
            'Beijing', 'Shanghai', 'Tianjin', 'Chongqing',
            'Shijiazhuang', 'Taiyuan', 'Hohhot', 'Shenyang', 'Changchun',
            'Harbin', 'Nanjing', 'Hangzhou', 'Hefei', 'Fuzhou', 'Nanchang',
            'Jinan', 'Zhengzhou', 'Wuhan', 'Changsha', 'Guangzhou', 'Nanning',
            'Haikou', 'Chengdu', 'Guiyang', 'Kunming', 'Lhasa', 'Xian',
            'Lanzhou', 'Xining', 'Yinchuan', 'Urumqi'
        ];
    
        // 城市名 -> 中文省份名 映射表
        const cityMap = {
            "Beijing": "北京", "Shanghai": "上海", "Tianjin": "天津", "Chongqing": "重庆",
            "Shijiazhuang": "河北", "Taiyuan": "山西", "Hohhot": "内蒙古", "Shenyang": "辽宁",
            "Changchun": "吉林", "Harbin": "黑龙江", "Nanjing": "江苏", "Hangzhou": "浙江",
            "Hefei": "安徽", "Fuzhou": "福建", "Nanchang": "江西", "Jinan": "山东",
            "Zhengzhou": "河南", "Wuhan": "湖北", "Changsha": "湖南", "Guangzhou": "广东",
            "Nanning": "广西", "Haikou": "海南", "Chengdu": "四川", "Guiyang": "贵州",
            "Kunming": "云南", "Lhasa": "西藏", "Xian": "陕西", "Lanzhou": "甘肃",
            "Xining": "青海", "Yinchuan": "宁夏", "Urumqi": "新疆"
        };
    
        // 存储城市温度数据
        let weatherData = [];
    
        // 获取天气数据
        async function fetchWeather(cityName, apiKey) {
            const url = `https://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=${apiKey}&units=metric`;
            try {
                const res = await fetch(url);
                const data = await res.json();
                return { name: cityMap[cityName], value: Math.round(data.main.temp) };
            } catch (e) {
                console.error(`无法获取 ${cityName} 天气`);
                return null;
            }
        }
    
        // 加载并渲染地图
        async function loadAndRender() {
            const apiKey = '7232a656fbb648e1c7336093960499fa';
            const promises = cities.map(city => fetchWeather(city, apiKey));
            const results = await Promise.all(promises);
            weatherData = results.filter(item => item !== null);
    
            let option = {
                title: {
                    x: "center",
                    textStyle: { fontSize: 18, color: "skyblue" }
                },
                tooltip: {
                    trigger: 'item',
                    backgroundColor: "skyblue",
                    formatter: '地区：{b}<br/>气温：{c}°C',
                    extraCssText: 'width:120px;height:60px;'
                },
                visualMap: {
                    top: 'center',
                    left: 'left',
                    min: -10,
                    max: 40,
                    text: ['高温', '低温'],
                    realtime: false,
                    calculable: true,
                    inRange: {
                        color: ['lightskyblue', 'yellow', 'orangered']
                    }
                },
                series: [{
                    name: '实时气温',
                    type: 'map',
                    mapType: 'china',
                    roam: false,
                    center: ['50%','50%'],
                    itemStyle: {
                        normal: {
                            label: {
                                show: true
                            }
                        }
                    },
                    data: weatherData
                }]
            };
    
            myEcharts.setOption(option);
        }
    
        // 执行加载
        loadAndRender();
    
        // 自适应窗口大小变化
        window.onresize = function (){
            myEcharts.resize();
        }
    </script>
</body>
</html>